<template>
  <div class="chatcontainer">
    <!-- 未登录状态 -->
    <!-- <div
      v-if="rowitem.status == 2"
      class="w_full h_full flexcolumn aligncenter justifycenter emptybox"
    >
      <img src="@/assets/images/empty1.png" alt="" class="emptyimg mb-20" />
      <div class="f-14 c_text3">请先登录企微号</div>
      <el-button type="primary" plain class="mt-20 f-14">登录</el-button>
    </div> -->
    <!-- 登录状态 v-else -->
    <div class="flex h_full">
      <div class="chatside bg_fff p_relative flexcolumn">
        <chatleft-header />
        <div class="chatlist">
          <!-- 列表头部 -->
          <div class="p-15 flexbetween" @click="handleOpearClose">
            <div class="c_222333 f-14">
              我的对话({{ chatList.length }}/上限10)
            </div>
            <el-dropdown v-if="!opear" trigger="click" @command="handleCommand" class="">
              <span class="el-dropdown-link flexcenter commhover fw-6">
                <span class="droptitle textover">{{ typeItem.name }}</span>
                <i class="el-icon-caret-bottom el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" class="p-8 headerdrop">
                <el-dropdown-item
                  v-for="(item, index) in typeList"
                  :key="index"
                  :command="item.id"
                  :class="{active:typeItem.name==item.name}"
                  >{{ item.name }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!-- 列表 -->
          <div class="chatbody">
            <template v-if="chatList.length">
              <chat-item
                v-for="(item, index) in chatList"
                :key="index"
                :item="item"
                :active="selectItem && selectItem.wxid == item.wxid"
                @handleItem="handleChateItem"
              />
            </template>
            <div v-else class="flexcenter flexcolumn mt-100">
              <img
                src="@/assets/images/empty1.png"
                alt=""
                class="emptyimg mb-20"
              />
              <div class="f-14 c_text3">暂无对话</div>
            </div>
            <!-- 挂起、排队、留言等列表 -->
            <div v-if="opear" class="othercontainer">
              <chat-hangup v-if="opear == 1" @close="handleOpearClose" />
              <chat-queueup v-if="opear == 2" @close="handleOpearClose" />
              <chat-word v-if="opear == 3" @close="handleOpearClose" />
              <chat-end v-if="opear == 4" @close="handleOpearClose" />
            </div>
          </div>
        </div>
        <div class="chatbottom flex f-14">
          <div
            class="cb_item flexcenter flexcolumn c_text2 f-14 commhover"
            :class="{ active: opear == 1 }"
            @click="handleOpear(1)"
          >
            <span>挂起</span>
            <span class="pt-4">(0)</span>
          </div>
          <div
            class="cb_item flexcenter flexcolumn c_text2 f-14 commhover"
            :class="{ active: opear == 2 }"
            @click="handleOpear(2)"
          >
            <span>排队</span>
            <span class="pt-4">(0)</span>
          </div>
          <div
            class="cb_item flexcenter flexcolumn c_text2 f-14 commhover"
            :class="{ active: opear == 3 }"
            @click="handleOpear(3)"
          >
            <span>留言</span>
            <span class="pt-4">(0)</span>
          </div>
          <div
            class="cb_item flexcenter flexcolumn c_text2 f-14 commhover"
            :class="{ active: opear == 4 }"
            @click="handleOpear(4)"
          >
            <span>结束</span>
            <span class="pt-4">(0)</span>
          </div>
        </div>
      </div>
      <div class="chatwindow">
        <chat-window
          :key="chatkey"
          :userItem="rowitem"
          :friendItem="selectItem"
        />
      </div>
      <div class="chatright bg_fff">
        <chat-right />
      </div>
    </div>
  </div>
</template>
<script>
import ChatRight from "./ChatRight.vue";
import ChatleftHeader from "./components/ChatleftHeader.vue";
import ChatWindow from "./ChatWindow.vue";
import ChatItem from "./components/ChatItem.vue";
import ChatHangup from "./ChatHangup.vue";
import ChatQueueup from './ChatQueueup.vue';
import ChatWord from './ChatWord.vue';
import ChatEnd from './ChatEnd.vue';
export default {
  data() {
    return {
      typeItem: null,
      rowitem: {},
      typeList: [
        { id: 1, name: "全部消息" },
        { id: 2, name: "私聊" },
        { id: 3, name: "群聊" },
      ],
      selectItem: null,
      chatList: [
        {
          wxid: "R:10814949724396927",
          nickname: "测试群",
          avatar:
            "//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/5922867c1cbd03953b39d60d0ece5f33.png",
          corp_name: "",
          isGroup:1
        },
        {
          wxid: "1688855537489444",
          nickname: "肖洁",
          avatar:
            "//wework.qpic.cn/wwpic3az/646139_qhEaA8U0R8ya8Uz_1702871041/0",
          corp_name: "志新",
          isGroup:0
        },
      ],
      chatkey: "",
      opear: "",
    };
  },
  components: {
    ChatleftHeader,
    ChatRight,
    ChatWindow,
    ChatItem,
    ChatHangup,
    ChatQueueup,
    ChatWord,
    ChatEnd,
  },
  created() {
    // console.log("rowitem:", this.rowitem);
    this.handleCommand(1);
    this.getList();
  },
  props: {
    // rowitem: {
    //   type: Object,
    //   default: {},
    // },
  },
  methods: {
    handleCommand(command) {
      this.typeList.forEach((item) => {
        if (command == item.id) {
          this.typeItem = item;
        }
      });
    },

    getList() {
      console.log("获取内容");
    },

    handleChateItem(item) {
      this.selectItem = item;
      this.chatkey = Date.now();
    },

    handleOpear(type) {
      this.opear = type;
    },

    handleOpearClose() {
      this.opear = "";
    },
  },
};
</script>
<style lang="scss" scoped>
.chatcontainer {
  width: 100vw;
  height: 100%;
  background-color: #fafafa;
}
.emptyimg {
  width: 90px;
  height: 90px;
}
.chatside {
  width: 320px;

  .chatlist {
    flex: 1;
    // padding: 8px 2px 8px 8px;
  }
  .chattitle {
    padding: 15px;
  }
  .chatbody {
    flex: 1;
    height: calc(100% - 50px);
    position: relative;
  }
  .othercontainer {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    animation: slide-up 0.6s ease-in-out forwards;
    // transform: translateY(600px); /* 向上移动元素 */
  }
  @keyframes slide-up {
    from {
      transform: translateY(600px);
    }
    to {
      transform: translateY(0);
    }
  }
  .chatbottom {
    height: 60px;
    color: #666777;
    border-top: 1px solid #e9e9e9;
    z-index: 9;
  }
  .cb_item {
    width: 25%;

    &.active {
      background-color: #3d71dd;
      color: #fff;
    }
  }
  .border-r {
    border-right: 1px solid #f0f0f0;
  }
}
.chatwindow {
  flex: 1;
  position: relative;
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
}
.chatright {
  width: 320px;
}
.headerdrop{
  ::v-deep .el-dropdown-menu__item{
    padding: 0 16px 0 10px;
    min-width: 120px;
    border-radius: 4px;

    &:hover, &.active{
      background-color: #f3f3f3;
      color: rgba(0, 0, 0, .85);
    }
  }
}
</style>